<extend name="Public/base" />
<block name="content">
<!--main-container-part-->
<div id="content">
<!--breadcrumbs-->
  <div id="content-header">
  </div>
<!--End-breadcrumbs-->

<!--Action boxes-->

  <div class="container-fluid">
  <literal>
 		  <style type="text/css">
        .triangle-left{width:0;height:0;border-top:10px solid transparent;border-right:15px solid #FFF;border-bottom:10px solid transparent;position:absolute;left:0px;top:30px}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.scale{-webkit-animation-name:scale;animation-name:scale}@keyframes scale{from{opacity:0;transform:scale3d(0,0,0)}30%{opacity:0.5;transform:scale3d(3,3,3)}to{opacity:1;transform:scale3d(1,1,1)}}@-webkit-keyframes scale{from{opacity:0;-webkit-transform:scale3d(0,0,0)}30%{opacity:0.5;-webkit-transform:scale3d(3,3,3)}to{opacity:1;-webkit-transform:scale3d(1,1,1)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{from{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{from{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}li{list-style:none}.g-bd a{font-size:14px}.g-bd .clearfix{clear:both}.g-bd{width:1000px;margin:30px 0}.g-bd .m-year{width:160px;position:fixed}.g-bd .m-year ul{display:block}.g-bd .m-year ul li{display:block;margin-top:10px}.g-bd .m-year ul li a{display:block;color:#545454;padding:0px 15px}.g-bd .m-year ul li a.active{color:#00D9D9;border-left:2px solid #00D9D9}.g-bd .m-year ul li a:hover{cursor:pointer}.g-bd .m-axis-box{position:relative;float:left;width:50px;min-height:1000px;margin-left:160px}.g-bd .m-axis-box .axis{width:20px;position:absolute;left:30px}.g-bd .m-axis-box .axis .circle{border-radius:100%;color:#FFF;background:#00D9D9;height:20px;line-height:20px;width:20px;text-align:center}.g-bd .m-axis-box .axis .line{height:0;width:6px;background:#00D9D9;margin:auto}.g-bd .m-axis-box .axis-read{width:50px;position:absolute;left:15px}.g-bd .m-axis-box .axis-read .circle{left:0;top:0;border-radius:100%;color:#FFF;background:#00D9D9;height:50px;line-height:50px;width:50px;text-align:center}.g-bd .m-axis-box .axis-read .line{height:0;width:6px;background:#00D9D9;margin:auto}.g-bd .main{float:left}.g-bd .main .say{}.g-bd .main .say .card{float:left;background:#00D9D9;margin:0 54px;padding:15px;overflow:hidden}.g-bd .main .say .card .avator{float:left;width:100px;height:100px;border-radius:10%;overflow:hidden}.g-bd .main .say .card p{float:left;width:450px;color:#FFF;letter-spacing:1px;text-indent:2em;line-height:1.5;font-size:14px;padding:15px}.g-bd .main .log-list{display:block;overflow:hidden;visibility:hidden;float:left}.g-bd .main .log-list .box{margin:15px 30px;background:#FFF;width:570px;padding:15px 20px;position:relative;box-shadow:1px 2px 5px rgba(214,214,214,0.75)}.g-bd .main .log-list .box .hd{margin-top:15px}.g-bd .main .log-list .box .hd p{letter-spacing:1px;color:#444}.g-bd .main .log-list .box .hd .week{float:left;background:#A1A1A1;border-radius:4px;height:50px;line-height:50px;width:50px;text-align:center;display:block;color:#FFF;font-size:13px}.g-bd .main .log-list .box .hd .date{float:left;margin-left:15px}.g-bd .main .log-list .box .hd .date .month{line-height:1.6}.g-bd .main .log-list .box .hd .date .year{line-height:1.6}.g-bd .main .log-list .box .bd{margin-top:15px}.g-bd .main .log-list .box .bd h4{color:#444;font-size:16px;line-height:2;margin-top:40px;font-weight:100}.g-bd .main .log-list .box .bd p{color:#666;font-size:14px;text-indent:2em;line-height:1.8}
        </style>
    </literal>
           <script type="text/template" id="tpl">
            <% for (var k in list) {%>
                <% var item = list[k] %>
                <li class="box log-list-one">
                    <span class="triangle-left"></span>
                    <div class="hd">
                        <p class="week"><%=item.week%></p>
                        <div class="date">
                            <p class="month"><%=item.date%></p>
                            <p class="year"><%=item.year%></p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="bd">
                        <% for (var j in item.section) {%>
                            <h4><%=item.section[j].title%></h4>
                            <p><%=item.section[j].content%></p>
                        <%}%>    
                    </div>
                </li>               
            <%}%>
        </script>
         <script type="text/template" id="tpl-nav">
            <% for (var i in list) {%>
                <% var item = list[i] %>
                <li><a data-order="<%=i%>"><%=item.fulldate%></a></li>
            <%}%>
        </script>  
           <div class="g-bd"><div class="m-year animated fadeInLeft"><ul id="j-nav"><li><a class="active" data-order="-1">名言</a></li></ul></div><div class="m-axis-box" id="j-axis-box"><div class="axis axis-read"><div class="circle">名言</div><div id="j-first-line" class="line"></div></div></div><div class="main animated fadeInRight" ><div class="say item"><div class="card"><div class="avator"><img src="http://activityfiles.oss-cn-hangzhou.aliyuncs.com/2015/2015/11/06-11-02/563c183945718.jpg" ></div><p id="j-say"></p><div class="clearfix"></div></div><div class="clearfix"></div></div><div class="log-list item"><ul id="j-list-ul"></ul></div></div><div class="clearfix"></div></div>        
        <!-- <script type="text/javascript" src="jquery-2.1.3.min.js"></script> -->
       
        <script type="text/javascript" src= "__JS__/underscore.js?v={:C('TKE_VERSION')}"></script>
        <!-- 文章 -->
        <script type="text/javascript" src="__JS__/hai.js?v={:C('TKE_VERSION')}"></script>
        <!-- 更新日志 -->
        <script type="text/javascript" src="__JS__/log.js?v={:C('TKE_VERSION')}"></script>
        <literal>
        <script type="text/javascript">
var rand=Math.ceil(Math.random()*255);$("#j-say").html(mycars[rand]);var dtd=$.Deferred();var template=_.template($("#tpl").html());var html=template(log_list);dtd.resolve();$("#j-list-ul").append(html);dtd.resolve();var top_store=[];dtd.done(function(){$("li.log-list-one").each(function(i){var $this=$("li.log-list-one").eq(i);var $tpl_axis=$("<div class=\"axis\"><div class=\"circle\"></div><div class=\"line\"></div></div>");var top=$("li.log-list-one").eq(i).offset().top;top_store.push(top);$("#j-axis-box").append($tpl_axis);$tpl_axis.css({"top":top}).addClass("animated scale").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",function(){if(0<$("li.log-list-one").eq(i+1).length){var next_top=$("li.log-list-one").eq(i+1).offset().top;}
$tpl_axis.find("div.line").animate({"height":(next_top-top)+"px"},500,function(){$this.css({"visibility":"visible"}).addClass("animated fadeInUp");$("span.triangle-left").animate({"left":"-15px"},2000);});$("#j-first-line").animate({"height":240+"px"},500);});});var $nav=$("#j-nav");var template=_.template($("#tpl-nav").html());var html=template(log_list);$nav.append(html);$nav.on("click","li>a",function(){var order=$(this).data("order");var top=$("li.log-list-one").eq(order).offset().top;if(-1==order)top=0;$("html, body").stop().animate({"scrollTop":top},500);});(function scrollspy(){function get_closest_top_one(top){for(var k in top_store){if(top_store[k]>top){$nav.children("li").children("a").removeClass("active").eq(k).addClass("active");break;}}}
var timer;$(window).scroll(function(){clearTimeout(timer);timer=setTimeout(function(){var top=$(window).scrollTop();get_closest_top_one(top);},100);});})();});
        </script>
        </literal>
  </div>
</div>
  </block>